<template>
  <div style="display: flex; user-select: none">
    <div v-for="(item, index) in numberList" :key="index" style="display: flex">
      <span v-if="isNaN(item)" class="noNumber">
        {{ item }}
      </span>
      <div class="number" v-else>
        <span
          class="number-item"
          ref="numberItem"
          :data-number="item"
          :data-index="index"
          >0123456789</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: 0,
    },
  },
  watch: {
    value(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.setNumberTransform()
        })
      }
    },
  },
  computed: {
    numberList() {
      return String(this.value).split('')
    },
  },
  data() {
    return {}
  },
  methods: {
    // 设置每一位数字的偏移
    setNumberTransform() {
      let numberItems = this.$refs.numberItem
      let obj = {}
      Array.from(numberItems).forEach((c) => {
        let key = c.dataset.index
        let value = c.dataset.number
        let init = 0
        obj[key] = setInterval(() => {
          if (init < value * 10) {
            init += 1
            c.style.transform = `translateY(-${init}%)`
          } else {
            clearInterval(obj[key])
            obj[key] = null
          }
        }, 20)
      })
    },
  },
  mounted() {
    this.setNumberTransform()
  },
}
</script>

<style scoped>
.noNumber {
  width: 20px;
  height: 45px;
  transform: translateX(60%);
  margin: 0 2.5vh 0 0;
  /* border: 3px solid red; */
  overflow: hidden;
  letter-spacing: 0.93vh;
  line-height: 4.06vh;
  font-size: 5vh;
}
.number {
  width: 40px;
  height: 45px;
  margin: 0 0.57vh 0 0;
  /* border: 3px solid red; */
  overflow: hidden;
  letter-spacing: 0.93vh;
  line-height: 3.06vh;
  font-size: 4.63vh;
  position: relative;
}
.number > span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: translateY(0%);
  position: absolute;
}
</style>
